<template>
<div class="sporty-tabs">
    <div class="sporty-tabs-nav" ref="container">
        <!--通过ref来获取title长度，可自带函数-->
        <div class='sporty-tabs-nav-item' v-for="(t,index) in titles" :class="{selected: t=== selected,disabled:t===disabled}" :key="index" :ref="el => { if (t===selected) selectedItem = el }" @click="t!==disabled && select(t)">{{t}}</div>
        <div class="sporty-tabs-nav-indicator" ref="indicator"></div>
    </div>
    <div class="sporty-tabs-content">
        <!-- <component class="sporty-tabs-content-item" :class="{selected: c.props.title === selected }" v-for="(c,index) in defaults" :is="c" :key="index" /> -->
        <component :is="current" :key="current.props.title"></component>
    </div>

</div>
</template>

<script lang="ts">
import {
    computed,
    onMounted,
    ref,
    watchEffect
} from 'vue'
//导入的实则是对象类型
import Tab from './Tab.vue'
export default {
    props: {
        selected: {
            type: String
        },
        disabled: {
            type: String
        },
    },
    setup(props, context) {
        //{...context.slots.default()}为log所输出的表示
        // console.log({
        //     ...context.slots.default()
        // });
        //ts的泛型HTML的div标签元素初始化，数组对象为空数组[]，普通对象则为null
        const selectedItem = ref < HTMLDivElement > (null);
        const indicator = ref < HTMLDivElement > (null);
        const container = ref < HTMLDivElement > (null);
        onMounted(() => {
            watchEffect(() => {
                //const divs=navItem.value;      (其中const navItems = ref < HTMLDivElement[] > ([]))
                const result = selectedItem.value;
                //通过过滤查找标签属性包括selected的
                // const result = divs.find(div => div.classList.contains("selected"));          
                // const result = divs.filter(div => div.classList.contains('selected'))[0]
                const {
                    width
                } = result.getBoundingClientRect();
                //直接修改indicator样式
                indicator.value.style.width = width + 'px';
                //left1为选中的导航条的起点，left2为容器的起点
                const {
                    left: left1
                } = result.getBoundingClientRect();
                const {
                    left: left2
                } = container.value.getBoundingClientRect();
                //定义left常量来保存位置移动的距离
                const left = left1 - left2;
                indicator.value.style.left = left + 'px';
            })
        })
        //default是保留字不可用作变量名，定义为上下文插槽的标签属性，从而判断检查是否符合为Tab标签
        const defaults = context.slots.default()
        // const result = Array.isArray(defaults)
        // console.log(result)
        //循环遍历数组，参数为tag函数（？）
        defaults.forEach((tag) => {
            //tag.type为标签的类型，标签类型不为Tab的报错（throw new Error抛出且创建一个错误对象，参数为报错提示）
            if (tag.type !== Tab) {
                throw new Error('Tabs的子组件标签必须是Tab')
            }
            //输出的是两个对象，里面键为title（字符串）的每个值
            // console.log({
            //     ...tag.props.title
            // })
        })
        //动态加载而非一次渲染则可用计算属性computed来实现,然后将计算得来的值返回给变量即可
        const current = computed(() => {
            //在defaults数组中返回tag.props.title === props.selected成立的tag
            return defaults.find(tag => tag.props.title === props.selected)
        })
        //点击选中的触发函数,向上冒泡emit通知外界，更新数据select,外界通过v-model监听即可/@update:selected='x=$event' 
        const select = (title: string) => {
            context.emit('update:selected', title)
        }
        const titles = defaults.map((tag) => {
            return tag.props.title
        })
        console.log(defaults[0].props.title);
        console.log(defaults[2].props.disabled);
        return {
            defaults,
            current,
            titles,
            select,
            indicator,
            container,
            selectedItem
        };
    }
}
</script>

<style lang="scss">
$purple:#8950fc;
$color: #333;
$border-color: #d9d9d9;

.sporty-tabs {

    &-nav {
        display: flex;
        color: $color;
        border-bottom: 1px solid $border-color;
        position: relative;

        &-item {
            padding: 8px 0;
            margin: 0 16px;
            cursor: pointer;

            &:first-child {
                margin-left: 0;
            }

            &.selected {
                color: $purple;
            }

            &.disabled {
                cursor: not-allowed;
                color: grey;
            }

        }

        &-indicator {
            position: absolute;
            height: 3px;
            background: $purple;
            left: 0;
            bottom: -1px;
            width: 100px;
            transition: all 250ms;
        }
    }

    &-content {
        padding: 8px 0;

        &-item {
            display: none;

            &.selected {
                display: block;
            }
        }
    }
}
</style>
